<template>
  <div id="app">
    <headerTop></headerTop>
     <div class="empyt"></div>
    <div class="contents">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
    import headerTop from './components/head.vue'
    export default {
        name: 'app',
        components: { headerTop }
    }
</script>

<style lang="scss">
    @import "../node_modules/font-awesome/css/font-awesome.min.css";
    #app {
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin-top: 60px;
        .empyt {
            width: 100%;
            height: 30px;
        }
        a {
            color: teal;
            text-align: center;
            text-decoration: none;
        }
        .contents {
            width: 1000px;
            margin: 10px auto;
            border-top: 1px solid #dbe2e8;
            border-left: 1px solid #dbe2e8;
            border-right: 1px solid #dbe2e8;
            box-shadow: 0 1px 2px rgba(46, 61, 73, .08);
            border-radius: 4px;
            padding: 0 10px;
            background: #fff;
            position: relative;
        }
    }

    li {
        list-style-type: none;
    }
</style>